# Active ID(s)

import index from '!!raw-loader!@site/docs/examples/active-ids.ex';
import { LiveDemo } from '@site/components/LiveDemo';

This feature requires the `withEntities` to be used in the `Store`. It lets you hold one or more IDs indicating the entities that are currently active. It is often useful
for monitoring which entities the user is interacting with.

:::info
This feature requires `@ngneat/elf-entities`
:::

## Active Id

To use this feature, provide the `withActiveId` props factory function in the `createStore` call:

```ts
import { createStore } from '@ngneat/elf';
import { withEntities, withActiveId } from '@ngneat/elf-entities';

interface Todo {
  id: number;
  label: string;
}

const todosStore = createStore(
  { name: 'todos' },
  withEntities<Todo>(),
  withActiveId(),
);
```

<LiveDemo src={index} packages={['entities']} />
<br />

This will allow you to use the following ready-made mutations and queries:

### Queries

### `selectActiveEntity`

Select the active entity:

```ts
import { selectActiveEntity } from '@ngneat/elf-entities';

const active$ = todosStore.pipe(selectActiveEntity());
```

### `selectActiveId`

Select the active id:

```ts
import { selectActiveId } from '@ngneat/elf-entities';

const activeId$ = todosStore.pipe(selectActiveId());
```

### `getActiveEntity`

Get active entity:

```ts
import { getActiveEntity } from '@ngneat/elf-entities';

const active = todosStore.query(getActiveEntity());
```

### `getActiveId`

Get the active id:

```ts
import { getActiveId } from '@ngneat/elf-entities';

const activeId = todosStore.query(getActiveId);
```

## Mutations

### `setActiveId`

Set the active id:

```ts
import { setActiveId } from '@ngneat/elf-entities';

todosStore.update(setActiveId(id));
```

### `resetActiveId`

Reset the active id:

```ts
import { resetActiveId } from '@ngneat/elf-entities';

todosStore.update(resetActiveId());
```

## Active Ids

To use this feature, provide the `withActiveIds` props factory function in the `createStore` call:

```ts
import { createStore } from '@ngneat/elf';
import { withEntities, withActiveIds } from '@ngneat/elf-entities';

interface Todo {
  id: number;
  label: string;
}

const todosStore = createStore(
  { name: 'todos' },
  withEntities<Todo>(),
  withActiveIds(),
);
```

This will allow you to use the following ready-made mutations and queries:

## Queries

### `selectActiveEntities`

Select the active entities:

```ts
import { selectActiveEntities } from '@ngneat/elf-entities';

const actives$ = todosStore.pipe(selectActiveEntities());
```

### `selectActiveIds`

Select the active ids:

```ts
import { selectActiveIds } from '@ngneat/elf-entities';

const activeIds$ = todosStore.pipe(selectActiveIds());
```

### `getActiveEntities`

Get active entities:

```ts
import { getActiveEntities } from '@ngneat/elf-entities';

const actives = todosStore.query(getActiveEntities());
```

### `getActiveIds`

Get active ids:

```ts
import { getActiveIds } from '@ngneat/elf-entities';

const activeIds = todosStore.query(getActiveIds);
```

### Mutations

### `setActiveIds`

Set the active ids:

```ts
import { setActiveIds } from '@ngneat/elf-entities';

todosStore.update(setActiveIds([id, id]));
```

### `addActiveIds`

Add active ids:

```ts
import { addActiveIds } from '@ngneat/elf-entities';

todosStore.update(addActiveIds([id, id]));
```

### `toggleActiveIds`

Toggle active ids:

```ts
import { toggleActiveIds } from '@ngneat/elf-entities';

todosStore.update(toggleActiveIds([id, id]));
```

### `removeActiveIds`

Remove active ids:

```ts
import { removeActiveIds } from '@ngneat/elf-entities';

todosStore.update(removeActiveIds([id, id]));
```

### `resetActiveIds`

Reset the active ids:

```ts
import { resetActiveIds } from '@ngneat/elf-entities';

todosStore.update(resetActiveIds());
```
